<template>
  <div class="search">
    <div class="search_input">
      <input
        type="search"
        @keyup.enter="issearch"
        v-on:blur="lost()"
        v-model="search_value"
        placeholder="大家都在搜 「游泳教练」"
      />
      <img src="../assets/magnifier.png" />
      <button class="button" @click="goOff()">取消</button>
    </div>
    <div class="search_nav" v-show="search">
      <img src="../assets/search.png" />
      <span>点击搜索</span>
      <span @click="searchword(search_value)">{{ this.search_value }}</span>
    </div>
    <!-- 搜索结果 -->
    <div class="main" v-if="result">
      <!-- 搜索场馆 -->
      <div v-if="ispd">
        <div class="sotitle">游泳健身场馆</div>
        <router-link
          :to="`/pdetails?sid=${pitem.sid}`"
          class="list"
          v-for="(pitem, i) in res"
          :key="i"
        >
          <div class="list-left">
            <img :src="require(`../assets/produce/${pitem.src}`)" />
          </div>
          <div class="list-right">
            <p class="title">{{ pitem.store_name }}</p>
            <div class="evaluate">
              <van-rate
                v-model="value"
                :size="20"
                color="#dc3545"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <p class="position">{{ pitem.street }}</p>
          </div>
        </router-link>
      </div>
      <div v-else class="sorry"></div>
      <!-- 搜索话题 -->
      <div v-if="ispdd">
        <div class="sotitle">热门话题搜索</div>
        <router-link
          :to="`/detailsd?fid=${hitem.fid}`"
          class="list"
          v-for="(hitem, i) in tip"
          :key="i + 1"
        >
          <div class="list-left">
            <van-image
              round
              width="2rem"
              height="2rem"
              fit="cover"
              :src="require(`../../public/${hitem.f_avatar}`)"
            />
          </div>
          <div class="list-right">
            <p class="title">{{ hitem.f_uname }}</p>
            <p class="position">{{ hitem.f_content }}</p>
          </div>
        </router-link>
      </div>
      <div v-else class="sorry"></div>
    </div>
    <!-- 搜索待选 -->
    <div v-else>
      <!-- 热搜词语 -->
      <div class="hot_title">热门搜索</div>
      <div class="hot_word">
        <button
          v-for="(ritem, m) in hotword"
          :key="m"
          @click="searchword(ritem.content)"
        >
          {{ ritem.content }}
        </button>
      </div>
      <!-- 热搜 -->
      <div class="hot_search">
        <ul class="hot">
          <li>热门场馆搜索</li>
          <ol class="hot_item" v-for="(witem, l) in this.store" :key="l">
            <li>{{ witem.sid }}</li>
            <li>
              <img :src="require(`../assets/produce/${witem.src}`)" />
            </li>
            <li>
              <router-link :to="`/pdetails?sid=${witem.sid}`"
                ><ol class="hot_name">
                  {{
                    witem.store_name
                  }}
                </ol></router-link
              >
              <ol>
                {{
                  witem.street
                }}
              </ol>
            </li>
          </ol>
        </ul>
        <ul class="hot">
          <li>热门话题搜索</li>
          <ol class="hottip_item" v-for="(item, t) in this.detailes" :key="t">
            <li>
              <van-image
                round
                width="1rem"
                height="1rem"
                fit="cover"
                :src="require(`../../public/${item.f_avatar}`)"
              />
            </li>
            <li>
              <router-link :to="`/detailsd?fid=${item.fid}`">
                <ol class="hottip_name">
                  {{
                    item.f_uname
                  }}
                </ol></router-link
              >
              <ol>
                {{
                  item.f_title
                }}
              </ol>
            </li>
          </ol>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      search: false,
      search_value: "",
      store: [],
      value: 5,
      hotword: [],
      res: [],
      result: false,
      detailes: [],
      tip: [],
      ispd: false,
      ispdd: false,
    };
  },
  methods: {
    // 是否显示搜索内容
    issearch() {
      if (this.search_value.length > 0) {
        this.search = true;
      } else if (this.search_value.length == 0) {
        this.search = false;
      }
      this.axios.get("/hotword/hot/" + this.search_value).then((result) => {
        if (result.data.msg == "ok") {
          this.axios
            .put(
              "/hotword/alter/" + this.search_value,
              `content=${this.search_value}`
            )
            .then((result) => {});
        } else {
          this.axios
            .post("/hotword/add", `content=${this.search_value}&quantity=1`)
            .then((result) => {});
        }
      });
    },
    // 热搜商铺
    showhot() {
      this.axios.get("/store").then((result) => {
        this.store = result.data.data;
      });
    },
    // 热搜话题
    showdetails() {
      this.axios.get("/find/findhot").then((result) => {
        this.detailes = result.data.data;
      });
    },
    // 热搜词
    showhotword() {
      this.axios.get("/hotword").then((result) => {
        this.hotword = result.data.data;
      });
    },
    // 点击热搜词搜索商铺
    searchword(item) {
      this.axios.get("/searchall/all/" + item).then((result) => {
        this.res = result.data.data;
        this.search_value = item;
        if (this.search_value.length > 0) {
          this.result = true;
        }
      });
      this.axios.get("/searchall/tip/" + item).then((result) => {
        this.tip = result.data.data;
        this.search_value = item;
        if (this.search_value.length > 0) {
          this.result = true;
        }
      });

      if (this.res != undefined && this.tip != undefined) {
        this.ispd = true;
        this.ispdd = true;
      } else {
        this.ispd = false;
        this.ispdd = false;
        Toast.fail("抱歉，没有您搜索的内容");
      }
    },
    lost() {
      if (this.search_value.length > 0) {
        this.result = true;
      } else {
        this.result = false;
      }
    },
    goOff() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.showhot();
    this.showhotword();
    this.showdetails();
  },
};
</script>

<style>
.search {
  width: 100%;
  margin: 0 auto;
  margin-top: 5%;
  height: 35px;
}
/* 搜索框 */
.search .search_input {
  width: 90%;
  display: flex;
  margin: 0 auto;
}
.search .search_input > :last-child {
  width: 50px;
  line-height: 35px;
}
.search .search_input > input {
  width: 7.5rem;
  height: 35px;
  border: 0;
  outline: none;
  border-radius: 35px;
  background-color: #efefef;
  padding: 0 10px 0 40px;
  position: relative;
}
.search .search_input > img {
  width: 28px;
  position: absolute;
  top: 3.5%;
  left: 8%;
}
/* 搜索导航 */
.search .search_nav {
  width: 80%;
  height: 35px;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  line-height: 35px;
  text-align: left;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: #999;
  position: fixed;
  top: 9%;
  left: 50%;
  transform: translate(-50%);
}
.search .search_nav img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.search .search_nav > :last-child {
  margin-left: 10px;
  color: #555;
}
/* 热搜 */
.search .hot_search {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  display: -webkit-box;
  white-space: nowrap;
}
.search .hot_search::-webkit-scrollbar {
  width: 0;
}
.search .hot {
  width: 65%;
  padding: 0 10px;
  border-radius: 10px;
  background-image: linear-gradient(#bce0ff, #fff);
  margin-left: 10px;
}
.search .hot > :first-child {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.search .hot > li {
  width: 120px;
  height: 130px;
  font-size: 14px;
  margin: 10px 10px 0 10px;
}
.search .hot_item {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.search .hot_item > li {
  margin-left: 10px;
  font-size: 14px;
}
.search .hot_item > li > a {
  color: #333;
}
.search .hot_item > :nth-child(2) {
  width: 60px;
  height: 40px;
  overflow: hidden;
}
.search .hot_item > li > :last-child {
  font-size: 12px;
  text-align: left;
  color: #999;
}
.search .hot_name {
  width: 130px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search .hot_item > li > img {
  width: 60px;
}
/* 热搜话题 */
.search .sotitle {
  margin-top: 30px;
}
.search .hottip_item {
  display: flex;
  align-items: center;
  margin-top: 10px;
  text-align: left;
}
.search .hottip_item > li {
  margin-left: 10px;
  font-size: 14px;
}
.search .hottip_item > li > a {
  color: #333;
}
.search .hottip_item > :nth-child(1) {
  width: 40px;
  height: 40px;
}
.search .hottip_name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 热搜词 */
.search .hot_title {
  width: 90%;
  text-align: left;
  font-size: 16px;
  margin: 0 auto;
  margin-top: 15%;
}
.search .hot_word {
  width: 90%;
  height: 80px;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  font-size: 14px;
  flex-flow: row wrap;
  place-items: space-around;
  overflow: hidden;
}
.search .hot_word > button {
  height: 30px;
  border: 0;
  outline: hidden;
  padding: 5px 15px;
  background-color: #eee;
  border-radius: 20px;
  margin: 5px 5px;
  font-size: 12px;
}
/* 搜索结果 */
.search .main {
  width: 90%;
  margin: 0 auto;
  margin-top: 15%;
}
.search .main > div {
  text-align: left;
  font-size: 16px;
  color: #333;
}
.search .list {
  width: 95%;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  display: flex;
  color: #333;
  text-align: left;
  line-height: 30px;
}
.search .list-left {
  width: 25%;
  padding-top: 10px;
}
.search .list-left > img {
  width: 100%;
  display: block;
}
.search .list-right {
  width: 65%;
  padding: 10px;
}
.search .title {
  font-size: 15px;
  font-weight: 600;
}
.search .evaluate {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search .position {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search .sorry {
  color: #eee;
  text-align: center;
  width: 100%;
  margin: 20px auto;
}
.search .button{
  height: 35px;
  background-color: #bce0ff;
  border-radius: 35px;
  margin-left: 10px;
  border:0;

}
</style>
